<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="/static/css/homepage.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

</head>

<body>
    <div id="indextop" class="header header2 header-theme-none">
        <div class="logo fl">
            <a href="#"></a>
        </div>
        <div class="nav fl">
            <a href="/index">首页</a>
            <c:if test="${user.role.id == 1}">
                <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                    <a target="_blank" style="cursor: pointer;">用户管理</a>
                    <ul id="solutionul">
                        <div style="height:10px;"></div>
                        <li class="solutionli">
                            <a href="/user/findAllUser?page=1">用户列表</a>
                        </li>
                        <li class="solutionli">
                            <a href="/user/addUser">用户增加</a>
                        </li>

                        <div style="height:10px;"></div>
                    </ul>
                </div>
            </c:if>
            <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                <a target="_blank" style="cursor: pointer;">统计信息</a>
                <ul id="solutionul">
                    <div style="height:10px;"></div>
                    <c:if test="${user.role.id == 1}">
                        <li class="solutionli">
                            <a href="/log/getUserStatistics?page=1">访问统计</a>
                        </li>
                        <li class="solutionli">
                            <a href="/log/getAllLog?page=1">用户访问</a>
                        </li>
                    </c:if>
                    <li class="solutionli">
                        <a href="/log/getLog?userId=${user.id}&page=1">个人访问</a>
                    </li>
                    <div style="height:10px;"></div>
                </ul>
            </div>
        </div>
        <style>
            #solutiontop{
                color: #357ae8;
            }
            #solutiontop:hover{
                /* 这里用auto有时无效，如果高度小于元素加起来的高度有bug */
                height: 500px !important;
                color: #357ae8;
            }
            #solutionul{
                overflow: hidden;
                clear: both;
                background: white;
                width: 120px;
                margin: -5px;
                box-shadow: 0px 0px 5px 1px rgba(80,80,80,0.4);
                position: relative;
                z-index: 1;
            }
            .solutionli a{
                width: 100%;
                text-align: center;
                box-sizing: border-box;
                color: #333 !important;
                padding: 0 10px !important;
                height: 40px !important;
                line-height: 40px !important;
            }
            .solutionli{
                height: 40px;
            }
        </style>
        <div class="log-reg fr">
            <a href="#" class="userName" style="">${user.name}</a>
            <a href="/outLogin" class="outLogin">退出登录</a>

        </div>

    </div>

    <div class="home-page">


        <div class="pop-win"  style="display: none;">
            <div class="pop-win-title">
                <span>

                </span>
            </div>
            <div class="line"></div>
            <div class="pop-win-content">
                <div class="user" >
                    <input class="userId" type="hidden" value="">
                    <table>
                        <tr>
                            <td class="left">用户名</td>
                            <td class="right">
                                <input class="userName" disabled placeholder="">
                            </td>
                        </tr>
                        <tr>
                            <td class="left">姓名</td>
                            <td class="right">
                                <input class="name" placeholder="请输入姓名">
                            </td>
                        </tr>
                        <tr>
                            <td class="left">邮箱</td>
                            <td class="right">
                                <input class="email" placeholder="请输入邮箱">
                            </td>
                        </tr>
                        <tr>
                            <td class="left">角色</td>
                            <td class="right">
                                <select class="role">
                                    <c:forEach items="${allRole}" var="role" varStatus="status">
                                        <c:if test="${status.count == 1}">
                                            <option value="${role.id}" selected>${role.name}</option>
                                        </c:if>
                                        <c:if test="${status.count != 1}">
                                            <option value="${role.id}">${role.name}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr style="">
                            <td class="left grade">
                                班级
                            </td>
                            <td class="right">
                                <select class="grade">
                                    <c:forEach items="${grades}" var="grade" varStatus="status">
                                        <c:if test="${status.count == 1}">
                                            <option value="${grade.id}" selected>${grade.name}</option>
                                        </c:if>
                                        <c:if test="${status.count != 1}">
                                            <option value="${grade.id}">${grade.name}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="line"></div>
            <div class="pop-win-operate">
                <button class="confirm">
                    确定
                </button>
                <button class="calcen">
                    取消
                </button>
            </div>
        </div>


        <div class="wapper">
            <div class="title">
                <span>
                    用户列表
                </span>
            </div>
            <div class="line"></div>
            <div class="content-title">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm">
                            编号
                        </div>
                        <div class="col-sm center-margin">
                            用户名
                        </div>
                        <div class="col-sm">
                            邮箱
                        </div>
                        <div class="col-sm center-margin">
                            姓名
                        </div>
                        <div class="col-sm">
                            角色
                        </div>
                        <div class="col-sm center-margin">
                            操作
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">

                <c:if test="${allUser != null}">
                    <c:forEach items="${allUser}" var="user" varStatus="status">
                        <c:if test="${status.count % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <input class="gradeId" type="hidden" value="${user.grade.id}">
                                        <div class="col-sm">
                                            <span>${user.id}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${user.userName}</span>
                                        </div>
                                        <div class="col-sm">
                                            <span>${user.email}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${user.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <input class="roleId" type="hidden" value="${user.role.id}">
                                            <span>${user.role.name}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span class="update">
                                                <a href="#">
                                                    修改
                                                </a>
                                            </span>
                                            <span class="delete">
                                                <a href="#">
                                                    删除
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${status.count % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <input class="gradeId" type="hidden" value="${user.grade.id}">
                                        <div class="col-sm">
                                            <span>${user.id}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${user.userName}</span>
                                        </div>
                                        <div class="col-sm">
                                            <span>${user.email}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${user.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <input class="roleId" type="hidden" value="${user.role.id}">
                                            <span>${user.role.name}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span class="update">
                                                <a href="#">
                                                    修改
                                                </a>
                                            </span>
                                            <span class="delete">
                                                <a href="#">
                                                    删除
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                    <c:if test="${allUser.size() < 15}">
                        <c:forEach var="1" begin="${allUser.size() + 1}" end="15" varStatus="status">
                            <c:if test="${(status.count + allUser.size()) % 2 == 1}">
                                <div class="list odd">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                            <c:if test="${(status.count + allUser.size()) % 2 == 0}">
                                <div class="list even">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                        </c:forEach>
                    </c:if>
                </c:if>
                <c:if test="${allUser == null}">
                    <c:forEach var="1" begin="1" end="15" varStatus="status">
                        <c:if test="${(status.count + allUser.size()) % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${(status.count + allUser.size()) % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                </c:if>

            </div>

            <div style="height: 15px"></div>

            <!-- 分页 -->
            <div class=".pagination">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <c:if test="${page == 1}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != 1}">
                            <li class="page-item">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize < 6}">
                            <c:forEach var="pageItem" begin="1" end="${pageItemSize}">
                                <c:if test="${page == pageItem}">
                                    <li class="page-item active">
                                        <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                                <c:if test="${page != pageItem}">
                                    <li class="page-item">
                                        <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </c:if>
                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 >= page}">
                            <c:if test="${page > 3}">
                                <c:forEach var="pageItem" begin="${page - 2}" end="${page + 2}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page <= 3}">
                                <c:forEach var="pageItem" begin="1" end="5">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>

                            <li class="page-item disabled">
                                <a class="page-link" href="#">...</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 < page}">
                            <c:if test="${page == pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 4 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page != pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 5 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/user/findAllUser?page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </c:if>
                        <c:if test="${page == pageItemSize}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != pageItemSize}">
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript">
        /**
         *  更新课程
         */
        $('.content .row .update').click(function (event) {
            //  取消默认事件行为
            event.preventDefault();

            //  改弹出框名称
            $('.pop-win .pop-win-title span').text('修改用户信息');
            //  改为可见
            $('.pop-win').css('display', 'block');

            // console.log($(this).attr({id : ""}));

            this.id += "updateClick";
            let prevs = $('#updateClick').parent().prevAll();
            let spans = prevs.children('span');
            let inputs = prevs.children('input');

            $('#updateClick').removeAttr("id");
            console.log(spans);
            let roleName = spans.eq(0).text();
            let name = spans.eq(1).text();
            let email = spans.eq(2).text();
            let userName = spans.eq(3).text();
            let userId = spans.eq(4).text();
            let roleId = inputs.val()
            let gradeId = prevs.parent().find("input").val();
            console.log(gradeId);
            if(roleId != 3) {
                $('.pop-win .pop-win-content .user .grade').css({display: "none"});
            } else {
                $('.pop-win .pop-win-content .user .grade').css({display: "block"});
            }

            $('.pop-win .pop-win-content .user .userId').val(userId);
            $('.pop-win .pop-win-content .user .userName').val(userName);
            $('.pop-win .pop-win-content .user .email').val(email);
            $('.pop-win .pop-win-content .user .name').val(name);
            $('.pop-win .pop-win-content .user .role').val(roleId);
            $('.pop-win .pop-win-content .user .grade').val(gradeId);

        });

        /**
         *  删除用户
         */
        $('.content .row .delete').click(function (event) {
            //  取消默认事件行为
            event.preventDefault();
            //  获取点击元素
            this.id += "deleteClick";
            let prevs = $('#deleteClick').parent().prevAll();
            let spans = prevs.children('span');
            $('#deleteClick').removeAttr("id");

            let userId = spans[4].innerHTML;
            console.log(userId);
            let data = {
                id: userId
            };
            $.ajax({
                type: 'DELETE',
                dataType:'json',
                data: JSON.stringify(data),
                url: '/user/deleteUser',
                contentType:"application/json",
                success: function (result) {
                    if(result.code === 1) {
                        alert(result.msg);
                        // 刷新页面
                        window.location.href = window.location.href;
                    }else {
                        alert(result.msg);
                    }
                }
            });
        });

        $('.pop-win-operate .confirm').click(function () {
            let userId = $('.pop-win .pop-win-content .user .userId').val();
            let userName = $('.pop-win .pop-win-content .user .userName').val();
            let email = $('.pop-win .pop-win-content .user .email').val();
            let name = $('.pop-win .pop-win-content .user .name').val();
            let roleId = $('.pop-win .pop-win-content .user .role option:selected').val();
            let gradeId = $('.pop-win .pop-win-content .user .grade option:selected').val();
            if(name === '') {
                alert("姓名不能为空");
                return false;
            }

            let data = {
                id: userId,
                name: name,
                email: email,
                grade: {
                    id: gradeId
                },
                role: {
                    id: roleId
                }
            };
            $.ajax({
                type: 'PUT',
                dataType:'json',
                data: JSON.stringify(data),
                url: '/user/updateUser',
                contentType:"application/json",
                success: function (result) {
                    if(result.code === 1) {
                        alert(result.msg);
                        // 刷新页面
                        window.location.href = window.location.href;
                    }else {
                        alert(result.msg);
                    }
                }
            });

            $('.pop-win').css('display', 'none');


        });

        $('.pop-win-operate .calcen').click(function () {
            $('.pop-win').css('display', 'none');
        });

        $('.pop-win .pop-win-content .user .role').change(function (event) {
            let roleId = $('.pop-win .pop-win-content .user .role option:selected').val();

            if(roleId != 3) {
                $('.pop-win .pop-win-content .user .grade').css({display: "none"});
            } else {
                $('.pop-win .pop-win-content .user .grade').css({display: "block"});
            }
        })
        
    </script>




</body>
</html>